<template>
    <div class="list-wrap">
        <Tips v-show="tipShow" :msg="tips"/>
        <div class="list">
            <div 
                class="item" 
                v-for="item in list" :key="item._id">
                <p class="name" @click="goDetails(item)">{{item.name}}</p>
                <p class="content">{{item.content}}</p>
                <div class="del">
                    <p @click="delConent(item)">删除</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import Tips from '../components/Tips.vue'
    export default {
        name:"About-List",
        props:['list'],
        components:{Tips},
        computed:{
            ...mapState('Home',['arouthInfo'])
        },
        data(){
            return {
                tipShow:false,
                tips:'',
                type:""
            }
        },
        methods:{
            // 设置提示框
            tipsOptions(){
                this.tipShow = true
                this.tips = '删除成功'
                setTimeout(()=>{
                    this.tipShow = false
                    this.tips = '删除成功'
                },1000)
            },
            // 更新页面
            updatePage(){
                if(this.type === '收藏'){
                    setTimeout(()=>{
                        this.$store.dispatch('About/getUserCollentList','收藏')
                    },50)
                }else if(this.type === '点赞'){
                    setTimeout(()=>{
                        this.$store.dispatch('About/getUserCommentList','点赞')
                    },50)  
                }else {
                    setTimeout(()=>{
                        this.$store.dispatch('About/getMyPosts')
                    },50)
                }
            },
            // 删除
            delConent(item){
                this.tipsOptions()
                // 调用接口
                if( this.$route.path === '/myCollent' || this.$route.path === '/myGiveup'){
                    this.$store.dispatch('About/removeCollentList',{type:this.type,item})
                }else{
                    this.$store.dispatch('About/DelMySendPosts',item)
                }
                
                // 更新
                this.updatePage()
            },
            
            // 页面跳转
            goDetails(item){
                // 获取作者信息
                this.$store.dispatch('Home/getArouth',item.arouth)
                // 添加浏览量
                this.$store.dispatch('Home/addLook',item._id)
                setTimeout(()=>{
                    this.$set(item,'arouthName',this.arouthInfo)
                    this.$router.push({
                        path:"/blogDetails",
                        query:item
                    })
                },30)
            }
        },

        created() {
            if(this.$route.path === '/myGiveup'){
                this.type = '点赞'
            }else if(this.$route.path === '/myCollent'){
                this.type = '收藏'
            }
        },
        
    }
</script>

<style scoped lang="less">
     .list-wrap{
            margin-top: 40px;
            .list{
                width: 90%;
                margin: 0 auto;
                .item{
                    width: 100%;
                    background: #fff;
                    padding-bottom: 0.7vw;
                    margin-bottom: 1.3vw;

                    p{
                        width: 90%;
                        padding-left: 2vw;
                    }
                    .name{
                        font-size: 24.6px;
                        font-weight: 1000;
                        padding: 1.3vw 0 1.3vw 2vw;
                        cursor: pointer;

                        &:hover{
                            text-decoration: underline;
                        }
                    }
                    .content{
                        overflow: hidden;
                        display: -webkit-box;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                    }
                    .del{
                        width: 90%;
                        height: 2vw;
                        text-align: right;
                        margin: 1.3vw 0 1.3vw 2vw;
                        color: red;
                        display: flex;
                        justify-content: right;

                        p{
                            padding: 0;
                            width: 6.5vw;
                            text-align: center;
                            height: 2vw;
                            line-height: 2vw;
                            background: red;
                            color: #fff;
                            cursor: pointer;
                            &:hover{
                                text-decoration: underline;
                                background: rgb(151, 20, 20);
                            }
                        }
                        
                    }
                }
            }
        }
</style>